<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="/css/style.css" rel="stylesheet"/>
    <script src="/js/jquery-1.11.0.min.js"></script>

    <script>

        $(document).ready(function () {
            // 打开页面后查询所有数据
            query()
            // 给查询按钮绑定事件
            $("#findBtn").click(function () {
                // 获取username的值
                const name = $("#username").val()
                // 获取 qq 的值
                const qq = $("#qq").val()
                // 获取 phone 的值
                const phone = $("#phone").val()
                // 获取表头
                const head = $("#head")
                // 清空表格
                $("#tbl").empty()
                // 将原表头添加回来，因为情况表格，不添加回来会没有表头
                $("#tbl").append(head)
                // 进行查询
                query(name,qq,phone)
            })
        })

        function query(name,qq,phone) {
            $.ajax({
                url:'/mgr/card/list',//请求的url。在html中的/，表示从域名后面开始
                type:'get', //请求方式，GET或POST
                data:{ //要提交给服务器的数据
                    username:name,
                    qq,
                    phone
                },
                dataType:'json',//服务器返回数据的类型
                success:function(data){//成功时执行该函数，data就是服务器返回的数据
                    if(data.code==0){

                        for(let item of data.data){

                            let row = `
                                <tr>
                                    <td width="150">${item.cname}</td>
                                    <td width="120">${item.cqq}</td>
                                    <td width="200" align="center">${item.cphone}</td>
                                    <td width="200">
                                        <a href="/mgr/card/showById.html?cid=${item.cid}">修改</a>
                                        <a href="javascript:void(0)" onclick="delById(${item.cid})">删除</a>
                                    </td>
                                </tr>
                            `
                            $("#tbl").append(row)
                        }


                    }else{
                        $("#msg").html(data.msg)//向id是msg的标签，显示文字
                    }
                },
                error:function(xhr,textStatus){//错误时执行该函数
                    console.log('错误')
                    console.log(xhr)
                    console.log(textStatus)
                }
            })
        }
        function delById(cid) {
            let b = confirm("您确定删除该条记录吗")
            if (b) {
                $.ajax({
                    url: '/mgr/card/deleteById',//请求的url。在html中的/，表示从域名后面开始
                    type: 'get', //请求方式，GET或POST
                    data: { //要提交给服务器的数据
                        cid
                    },
                    dataType: 'json',//服务器返回数据的类型
                    success: function (data) {//成功时执行该函数，data就是服务器返回的数据
                        if (data.code == 0) {
                            location.reload()
                        } else {
                            $("#msg").html(data.msg)//向id是msg的标签，显示文字
                        }
                    },
                    error: function (xhr, textStatus) {//错误时执行该函数
                        console.log('错误')
                        console.log(xhr)
                        console.log(textStatus)
                    }
                })
            }
        }
    </script>
</head>
<body>
姓名:<input type="text" name="username" id="username">
QQ:<input type="text" name="qq" id="qq">
联系方式:<input type="text" name="phone" id="phone">
<button id="findBtn">查询</button>
<div id="msg" class="warn"></div>

<table border="1" id="tbl">
    <tr id="head">
        <td width="150">姓名</td>
        <td width="120">QQ</td>
        <td width="200" align="center">联系方式</td>
        <td width="200">操作</td>
    </tr>
</table>
</body>
</html>